<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="/js/layui2/css/layui.css" media="all">
    <link rel="stylesheet" href="/js/viewer/css/viewer.min.css" media="all">

    <style>
        #imgs img {
            width: 200px;
            height: 100px;
        }
        .layui-layout-admin .layui-side{
            top: 0px;
        }
        .layui-layout-admin .layui-body{
            top: 0px;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="navList" id="navList">

            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <table class="layui-table" id="imgs">
                <colgroup>
                    <col width="150">
                    <col width="150">
                    <col width="200">
                    <col width="200">
                    <col>
                </colgroup>
                <tbody id="imgstr">

                </tbody>
            </table>
        </div>
    </div>
</div>

<script id="navTpl" type="text/html">
    {{# layui.each(d.list, function(index, item){ }}
    <li class="layui-nav-item" onclick="getImgs('{{item.ID}}')"><a href="#" id="{{item.ID}}">{{item.IMGTYPE}}</a></li>
    {{# }); }}
</script>
<script id="imgsTemp" type="text/html">
    {{# layui.each(d.list, function(index, item){ }}

    <tr style="text-align: center">
        <td>
            <img src="{{item.FTPPATH}}"/><br/>
            {{item.ACCESSORYNAME}}
        </td>
        <td>
            <button type="button" srcimg="{{item.FTPPATH}}" class="layui-btn layui-btn-fluid">插入</button>
        </td>
    </tr>
    <li>
        <img lay-src="">
    </li>
    {{# }); }}
</script>
<!--页面中一定要引入internal.js为了能直接使用当前打开dialog的实例变量-->
<!--internal.js默认是放到dialogs目录下的-->
<script type="text/javascript" src="/js/jquery/jquery-1.8.0.min.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/layui2/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/ueditor/dialogs/internal.js"></script>
<script type="text/javascript" src="/js/viewer/js/viewer-jquery.min.js"></script>
<script>
    var laytpl;
    var flow;
    var element;
    var layer;
    layui.use(['layer','laytpl', 'flow', 'element'], function () {
        flow = layui.flow;
        element = layui.element;
        layer = layui.layer;
        laytpl = layui.laytpl;


        $.ajax({
            type: "post",
            url: "sys_util_imgsDb_getType.action",
            data: {
                sessionId: parent.frmMain.sessionId.value,
                user:'true'
            },
            dataType: "json",
            success: function (data) {
                var getTpl = navTpl.innerHTML;
                laytpl(getTpl).render(data, function (html) {
                    $("#navList").html(html);
                    element.init();
                    //模拟点击一次
                    $("#navList li:eq(0)").click();
                });
            }
        });


    });

    /**
     * 打开小程序功能
     */
    function openManage() {
        window.open("sys_skin_getFramePageIndex.action?openId=297eb6155f4c4e72015f4c5b8aea009b&sessionId=" + parent.frmMain.sessionId.value)
    }

    function getImgs(typeid) {
        $.ajax({
            type: "post",
            url: "sys_util_imgsDb_getMyImgsByType.action",
            data: {
                sessionId: parent.frmMain.sessionId.value,
                typeId:typeid
            },
            dataType: "json",
            success: function (data) {
                var getTpl = imgsTemp.innerHTML;
                laytpl(getTpl).render(data, function (html) {
                    $("#imgstr").html(html);
                    //按屏加载图片
                    flow.lazyimg({
                        elem: '#imgs img'
                    });
                    $("#imgs button").click(function () {
                        editor.execCommand('inserthtml', '<img src="' + $(this).attr("srcimg") + '"/><br/>');
                    })
                    $('#imgs').viewer();
                });
            }
        });
    }

</script>

<script>

    // //可以直接使用以下全局变量
    // //当前打开dialog的实例变量
    // alert('editor: '+editor);
    // //一些常用工具
    // alert('domUtils: '+domUtils);
    // alert('utils: '+utils);
    // alert('browser: '+browser);
</script>
</body>
</html>